<template>
  <div class="top-bar">
    <!--<div class="min-nav-btn">
      <span></span>
    </div>
    <div>
      <div class="searchComponent searchStyle_a">
        <input type="email" class="form-control" placeholder="快速查询老人">
        <span></span>
      </div>
    </div>-->
    <div class="top-logo">
      <!--<img src="../images/app_logo/app_logo.png">-->
      <h2>智慧英语</h2>
    </div>

    <div class="manager-headImg">
      <div class="headImg" >
        <!-- style="background-image: url(../images/login-page/login-bg.png);"-->
        <!--<img width="100%" src="../images/user-headImg/user-headImg.jpeg">-->
      </div>
      <span style="font-weight: 100;"  class="manager-name">管理员</span>

      <el-button
              style="color: #ffffff;"
              @click="signOut"
              element-loading-text="正在退出..."
              v-loading.fullscreen.lock="fullscreenLoading"
              type="text">
        <i style="margin-left: 6px;vertical-align: middle;" class="el-icon-signout"></i>
      </el-button>




    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'topBar',
    data:function() {
      return {
        fullscreenLoading:false
      }
    },
    methods: {
      handleIconClick:function(ev) {
        console.log(ev);
      },
      signOut:function(){
        var _this = this;

        this.$confirm('您即将退出管理系统,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$store.commit("LOGIN_SUCCESS",{});
          _this.$util.eraseCookie("loginUser");
          _this.$router.push("/LoginPage");
        }).catch(() => {
          /*this.$message({
            type: 'info',
            message: '已取消删除'
          });*/
        });
      },

    },
    components : {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" >
@import "../less/unite.less";
.topBar>div{
  display: inline-block;
  margin-right: 6px;
  margin-top: 8px;
}
.min-nav-btn>span{
  width: 34px;
  height: 34px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}
.min-nav-btn>span:before{
  font-family: MuiFont;
  content: "\e563";
  font-size: 24px;
  color: #131313;
}
.manager-headImg{
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 70px;
  margin: 0!important;
  padding: 10px;
}
.manager-headImg>div.headImg{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: @colorSearch-bg;
  .borderRadus(50%);
  overflow: hidden;
  vertical-align: middle;
  .backgroundSize(center;center;cover);
}
.manager-headImg>span.manager-name{
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-left: 6px;
  font-size: 18px;
  vertical-align: middle;
  color: #ffffff;
}
.manager-headImg>span.manager-icon{
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.manager-headImg>span.manager-icon:before{
  font-family: FontAwesome;
  content: "\F0D7";
  font-size: 20px;
  color: #131313;
}
.logo-out{
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

  /*搜索*/
  .top-search{
    width: 240px;
  }
  .top-search .el-input__inner{
    border: none;
    border-radius: 50px;
    background-color: #e9f6ff;
  }
.top-search .el-input__inner:hover{
  border: none;
}
  .top-search .el-input__inner:focus{
    background-color: #ffffff;
    border: none;
  }
</style>
